<template>
  <div>
    <div class="com-top-nav">
      <van-nav-bar
        title="首页"
      />
    </div>
    <van-swipe indexSwipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in imgList" :key="index">
        <img @click="gotoUrl(image.link)" v-lazy="image.url" />
      </van-swipe-item>
    </van-swipe>
    <div>
      <div skills-class>
        <router-link :to="{name: 'taskList', params: {type: 'all'}}" tag="div">
          <img src="/static/img/skills-all.png" alt="">
          <p>全部兼职</p>
        </router-link>
        <router-link :to="{name: 'taskList', params: {type: 'offline'}}" tag="div">
          <img src="/static/img/offline-part-time.png" alt="">
          <p>线下兼职</p>
        </router-link>
        <router-link :to="{name: 'taskList', params: {type: 'skill'}}" tag="div">
          <img src="/static/img/skills-part-time.png" alt="">
          <p>技能兼职</p>
        </router-link>
        <router-link :to="{name: 'taskList', params: {type: 'other'}}" tag="div">
          <img src="/static/img/online-part-time.png" alt="">
          <p>悬赏互助</p>
        </router-link>
      </div>

    </div>
    <!--<van-button type="primary" size="large" @click="getAccess">获得授权</van-button>-->
    <!--<van-button type="primary" size="large" @click="delAccess">取消授权</van-button>-->
    <div>
      <task-list-item></task-list-item>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue';
  import taskListItem from '../../components/task-list-item';
  import {NavBar, Swipe, SwipeItem, Row, Col, Icon,Lazyload} from 'vant';
  import common from '../../common/common';

  Vue.use(NavBar);
  Vue.use(Swipe);
  Vue.use(SwipeItem);
  Vue.use(Row);
  Vue.use(Col);
  Vue.use(Icon);
  Vue.use(Lazyload, {});
  export default {
    data(){
      return {
        count: 0,
        isLoading: false,
        imgList:[
          {
            url:'/static/img/qsmy101.jpg',
            link:'https://mp.weixin.qq.com/s/007Lyb2Wb438riSPbgf0Vg'
          },
          {
            url:'/static/img/qsmy102.jpg',
            link:'https://mp.weixin.qq.com/s/3PZ_L-LXTHUPUg05Q4T1Gw'
          },
          {
            url:'/static/img/qsmy100.jpg',
            link:'#'
          },
        ]
      }
    },
    components: {
      Swipe, SwipeItem, Row, Col, Icon, taskListItem
    },
    methods: {
      gotoUrl(link){
        window.location.href = `${link}?${new Date().getTime()}`;
      },
      delAccess() {
          common.store.setUser('');
      },
      getAccess() {
        const userData = {
          isLogin: true,
          name: 'admin'
        };
        // common.store.setUser(userData);
      },
      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
          this.isLoading = false;
          this.count++;
        }, 500);
      }
    }
  }
</script>

<style scoped lang="less" type="text/less">
  @import url('../../../static/style/bottom-person-nav.less');

  .demo-color-btn {
    margin: 8px;
  }

  [skills-class] {
    padding-top: 10px;
    padding-bottom: 10px;
    background: #fff;
    display: flex;
    div {
      flex: 1;
      text-align: center;
      img {
        height: 40px;
        width: 40px;
      }
    }

  }

</style>
